import React, { ReactNode } from 'react';
import Button, { ButtonTheme, ButtonType } from '../../button/components/Button';


type FloatButtonProps = {
    children?: ReactNode | string | number,
    position?: string,
    icon?: ReactNode,
    width?: string,
    height?: string,
    padding?: string,
    shape?: "square" | "circle",
    theme?: ButtonTheme,
    type?: ButtonType,
    onClick?: (e?:React.MouseEvent) => void,

};

const FloatButton = ({ children, icon, position = "right-0 top-1/2", width, height, padding = "!p-2", shape = "square", type, theme, onClick }: FloatButtonProps) => {
    let resIcon;
    if (icon && React.isValidElement(icon)) {
        resIcon = React.cloneElement(icon, {
            ...icon.props as object,
            className: `w-6 h-6 ${(icon.props as { className: string; }).className || ''} `,
        } as object);
    }
    let resHeight;
    let resWidth;
    let resPadding;
    if (children) {
        resPadding = padding;
        resWidth = width ? width : "!min-w-12";
        resHeight = height ? height : "!h-auto";
    } else {
        resPadding = padding ? padding : "!p-0";
        resWidth = width ? width : "!w-10";
        resHeight = height ? height : "!h-10";
    }

    return (
        <Button type={type} theme={theme} onClick={onClick} rounded={(shape === "circle") ? "rounded-full" : undefined} className='max-w-20' padding={resPadding} margin='m-0 mr-10' width={resWidth} height={resHeight} shadow='shadow-[0px_0px_8px_2px_rgba(0,0,0,0.25)]' icon={resIcon} float flexDirection='col' position={position}>{children}</Button>
    );
};

export default FloatButton;
